import React from "react";
import {Image, ImageBackground, Platform, StyleSheet} from "react-native";
import { Text, TouchableOpacity, View } from "react-native-ui-lib";
import { commonStyles } from "../configs/commonStyle";
import { NAV_BAR_HEIGHT_ANDROID, NAV_BAR_HEIGHT_IOS } from "../configs/platform";
import { Badge } from "react-native-elements";
import { Icon } from "../pages/components";
import {IconImage} from "./images";

export default class ViewUtils {

  static getLeftButton(callBack, color = "#555555") {
    return (<TouchableOpacity
      onPress={callBack}>
      <View style={styles.navBar}>
        <Icon type="AntDesign" name="leftcircleo" color={color} size={21} />
      </View>
    </TouchableOpacity>);
  }
  static getLeftIconButton(callBack,icon, color = "#555555") {
    return (<TouchableOpacity
        onPress={callBack}>
      <View style={styles.navBar}>
        <Icon type="AntDesign" name={icon} color={color} size={21} />
      </View>
    </TouchableOpacity>);
  }


  static getRightTextBtn(text, callBack) {
    return (<TouchableOpacity
      onPress={callBack}>
      <View style={styles.navBar}>
        <Text style={commonStyles.text_black_14}>{text}</Text>
      </View>
    </TouchableOpacity>);
  }

  static getRightBtn(img, callBack, badgeValue = null) {
    return (<TouchableOpacity
      onPress={callBack}>
      <View style={styles.navBar}>
        <Image
          style={{ width: 18, height: 22 }}
          source={img} />
        {
          (IsNullOrEmpty(badgeValue) || Number(badgeValue) === 0) ? null :
            <Badge
                   status="error"
                    size={"5"}
                   containerStyle={{ position: "absolute", top: 9, right:11}}
            />
        }

      </View>
    </TouchableOpacity>);
  }

  static getRightImgTextBtn(img, text, callBack, size = 16) {
    return (<TouchableOpacity
      onPress={callBack}>
      <View row centerV style={styles.navBar}>
        <Icon
          type="AntDesign"
          size={size}
          color={"#555555"}
          name={img} />
        <Text style={commonStyles.text_primary_16}>{text}</Text>
      </View>
    </TouchableOpacity>);
  }

  static getRightIconBtn(img, color, callBack) {
    return (<TouchableOpacity
      onPress={callBack}>
      <View row centerV style={styles.navBar}>
        <Icon
          type="AntDesign"
          size={16}
          color={color}
          name={img} />
      </View>
    </TouchableOpacity>);
  }

  static getRightCustomBtn(text, callBack) {
    return (<TouchableOpacity style={{ ...styles.navBar,width:49,height:30,marginRight:10}} onPress={callBack}>
      <ImageBackground source={IconImage.bg_small_btn} style={{ width:49,height:30,...commonStyles.center}}>
        <Text style={{ ...commonStyles.text_white_12}}>{text}</Text>
      </ImageBackground>
    </TouchableOpacity>);
  }

}
const styles = StyleSheet.create({

  navBar: {
    paddingHorizontal: 15,
    alignItems: "center",
    justifyContent: "center",
    height: Platform.OS === "ios" ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
  },

});
